<template>
  <div class="gap-col-8">
    <div class="gap-col-4">
      <div class="gap-col-8">
        <VirtualScrollSelector
          v-model="countryInput"
          :items="countries"
          item-title="name"
          item-value="code"
          :label="$t('label.country')"
          :placeholder="$t('placeholder.country')"
          search
          @click:option="(v) => (validation.country.value = v)"
        ></VirtualScrollSelector>
        <div
          v-if="validation.country.error"
          class="text-end font-size-12 font-weight-400 line-height-120 text-primary-x"
        >
          {{ validation.country.error }}
        </div>
      </div>
    </div>
    <button
      class="identity text-primary font-size-14 font-style-normal font-weight-500 line-height-140"
      v-for="(button, index) in buttons"
      :key="`identity-btn-${index}`"
      @click="() => (validation.identity.value = button.value)"
      :class="{ 'identity-select': validation.identity.value === button.value }"
    >
      {{ $t(button.label) }}
    </button>
    <div v-if="validation.identity.error" class="text-end font-size-12 font-weight-400 line-height-120 text-primary-x">
      {{ validation.identity.error }}
    </div>
  </div>
</template>
<script setup>
import countryTimezone from 'countries-and-timezones'
import { cloneDeep } from 'lodash-es'
import { reactive, ref, watch } from 'vue'
import { $t } from '@/i18n'
import { useYup } from '@/plugins/yup'
import VirtualScrollSelector from '@/components/form/VirtualScrollSelector.vue'
import { useConfirmData } from '@/compositions/dialog/confirm-data'
import { useI18nPack } from '@/compositions/request/i18nPack'
import { CREDENTAIL_TYPE } from '@/constant'

const countries = useI18nPack('select', 'about', [])

const Yup = useYup()

const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
const countryCode = countryTimezone.getTimezone(timezone).countries[0]

const countryInput = ref('')
watch(countries, (v) => v.length > 0 && (countryInput.value = v.find((item) => item.code === countryCode)?.name))

const validation = reactive({
  country: {
    value: countryCode ?? 'CN',
    error: '',
    check: false,
    schema: Yup.string().required(),
  },
  identity: {
    value: null,
    error: '',
    check: false,
    schema: Yup.number().required(),
  },
})

const buttons = [
  { label: 'identity.passport', value: CREDENTAIL_TYPE.PASSPORT },
  { label: 'identity.idCard', value: CREDENTAIL_TYPE.IDENTITY_CARD },
  { label: 'identity.driverLicense', value: CREDENTAIL_TYPE.DRIVER_LICENCE },
]

useConfirmData(() => {
  for (const [key, obj] of Object.entries(validation)) {
    try {
      obj.schema.validateSync(obj.value)
      obj.check = true
      obj.error = ''
    } catch (err) {
      console.log('error', err.message)
      obj.check = false
      obj.error = err.message
    }
  }
  if (!validation.country.check || !validation.identity.check) return false

  const result = {
    country: cloneDeep(validation.country.value),
    identity: cloneDeep(validation.identity.value),
  }

  validation.country = {
    value: countryCode ?? 'CN',
    error: '',
    check: false,
    schema: Yup.string().required(),
  }

  validation.identity = {
    value: null,
    error: '',
    check: false,
    schema: Yup.number().required(),
  }
  return result
})
</script>
<style scoped lang="scss">
.identity {
  display: flex;
  width: 100%;
  height: 2.5rem;
  padding: 0rem 1rem;
  justify-content: center;
  align-items: center;

  border-radius: 0.625rem;
  border: 1px solid var(--color-primary-red, #f42c52);
  background: var(--bg-dialog, #333546);
}

.identity-select {
  background: var(--bg-dialog, #42455b);
}
</style>
